<template>
  <div class="oss-config">
    <div class="page-header">
      <h1>存储配置</h1>
      <p>配置对象存储服务（OSS）</p>
    </div>

    <el-card shadow="hover">
       <el-form :model="ossForm" label-width="150px" style="max-width: 600px;">
        <el-form-item label="服务商">
          <el-select v-model="ossForm.provider">
            <el-option label="阿里云OSS" value="aliyun_oss" />
            <el-option label="腾讯云COS" value="tencent_cos" />
            <el-option label="七牛云Kodo" value="qiniu_kodo" />
          </el-select>
        </el-form-item>
        <el-form-item label="Bucket名称">
          <el-input v-model="ossForm.bucketName" />
        </el-form-item>
        <el-form-item label="Endpoint">
          <el-input v-model="ossForm.endpoint" />
        </el-form-item>
        <el-form-item label="AccessKey ID">
          <el-input v-model="ossForm.accessKeyId" />
        </el-form-item>
        <el-form-item label="AccessKey Secret">
          <el-input v-model="ossForm.accessKeySecret" type="password" show-password />
        </el-form-item>
        <el-form-item label="自定义域名">
          <el-input v-model="ossForm.customDomain" placeholder="可选，如 https://cdn.example.com" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveOssConfig">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

const ossForm = reactive({
  provider: 'aliyun_oss',
  bucketName: 'creative-crowdfunding-bucket',
  endpoint: 'oss-cn-beijing.aliyuncs.com',
  accessKeyId: 'LTAI5t****************',
  accessKeySecret: 'zCM***************************',
  customDomain: 'https://cdn.creativecrowdfunding.com',
});

const saveOssConfig = () => {
  ElMessage.success('存储配置已保存！');
};
</script>

<style scoped>
.oss-config { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: #666; }
</style> 